<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../libs/leaflet/leaflet.ChineseTmsProviders.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="map"></div>
		<div>
			<button type="button" onclick="addWms()">添加wms地图</button>
			<button type="button" onclick="removeWms()">删除wms地图</button>
		</div>
		<script type="text/javascript" id="my_script">
			let map = L.map('map', {
				center: [32.444721222054795, 119.4224873962402], // leaflet 所有坐标都是纬度在前,经度在后的
				zoom: 16
			})
			let baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(baseLayer)
			let labelLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(labelLayer)
			
			let wmsLayer = L.tileLayer.wms("http://10.12.102.21:8085/geoserver/hl/wms", {
				layers: 'hl:xds',
				format: 'image/png',
				transparent: true,
				uppercase: true
			})
			// L.tileLayer.wms 第一个参数 是服务url 第二个参数是参数
				
			map.on("click",(e)=>{
				// 根据点击的坐标去请求后端的接口,获取详情
			})	
				
			function addWms() {
				map.addLayer(wmsLayer)
			}

			function removeWms() {
				if (map.hasLayer(wmsLayer)) {
					wmsLayer.remove()
				}
			}
			
		</script>
	</body>
</html>
